<template>
  <!--头部第三行 选项区域-->
  <div>
    <span id="home-selections">
      <el-button type="text" class="home-selection" @click="handleClick(1)" id="sel1">首 &nbsp;页</el-button>
      <el-button type="text" class="home-selection" @click="handleClick(2)" id="sel2">选 &nbsp;车</el-button>
      <el-button type="text" class="home-selection" @click="handleClick(3)" id="sel3">发布文章</el-button>
      <el-button type="text" class="home-selection" @click="handleClick(4)" id="sel4">文章管理</el-button>
    </span>
  </div>
</template>

<script>
export default {
  name: "HeadSelections",
  methods: {
    handleClick(id) {
      document.getElementById("sel" + id).blur();
      switch (id) {
        case 1: this.$router.push("home"); break
        case 2: this.$router.push("carSelection"); break;
        case 3:
          if (this.GLOBALVAR.isLogged) {
            this.$router.push("arti/edit");
          } else {
            this.$message.info("您必须登录后才可以进行该操作!");
            this.$router.push("/login");
          }
          break;
        case 4:
          if (this.GLOBALVAR.isLogged) {
            this.$router.push("article/my");
          } else {
            this.$message.info("您必须登录后才可以进行该操作!");
            this.$router.push("/login");
          }
          break;
      }
    }
  }
}
</script>

<style scoped>

#home-selections {
  margin-left: 600px;
}

.home-selection {
  font-weight: 700;
  font-size: 30px;
  color: #000000;
  margin-right: 50px;
  padding-bottom: 20px;
}

.home-selection:hover,
.home-selection:active {
  color: rgb(230, 162, 60);
}
</style>
